<script setup lang="ts">
import {ref} from 'vue';

const value = ref(1);
const textType = ref('modern'); // 文本类型
const semanticType = ref('verbal'); // 语义类型
</script>

<template>
  <el-input-number v-model="value"/>
  <el-select v-model="textType" class="el-margin-top">
    <el-option label="现代(modern)" value="modern"/>
    <el-option label="老写(traditional)" value="traditional"/>
  </el-select>
  <el-select v-model="semanticType" class="el-margin-top">
    <el-option label="口语(verbal)" value="verbal"/>
    <el-option label="字面(literal)" value="literal"/>
    <el-option label="货币(money)" value="money"/>
  </el-select>
  <h3>结果：</h3>
  <div class="number-box">
    <dev-number-converter :number="value" :text-type="textType" :semantic-type="semanticType"/>
  </div>
</template>

<style scoped>
.number-box {
  font-size: 20px;
  font-weight: bolder;
}

.el-margin-top {
  margin-top: 20px;
}
</style>
